<template>
  <div class="article-page" v-if="model">
    <div class="d-flex py-3 px-2 ai-center title">
      <i class="iconfont icon-back text-blue" @click="$router.push('/')"></i>
      <strong class="flex-1 px-2 text-ellipsis text-blue">{{model.name}}</strong>
      <div class="text-gray fs-xs">{{model.created | date}}</div>
    </div>
    <div class="body fs-xl px-3 pt-3" v-html="model.content"></div>
    <div class="related p-3 mb-4">
      <div class="d-flex pb-3">
        <i class="iconfont icon-link pr-1"></i>
        <strong class="text-blue fs-lg">相关资讯</strong>
      </div>
      <div v-for="item in model.related" :key="item.id">
        <div class="d-flex ai-center">
          <div class="text-ellipsis fs-lg flex-1 py-1">{{item.name}}</div>
          <div class="text-gray fs-md">{{item.created | date}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  filters: {
    date (val) {
      return moment(val).format('YYYY-MM-DD')
    }
  },
  props: {
    id: { type: String, required: true }
  },
  data () {
    return {
      model: null
    }
  },
  methods: {
    async fetch () {
      const res = await this.$http.get(`/articles/${this.id}`)
      this.model = res.data
      console.log(res.data)
    }
  },
  created () {
    this.fetch()
  }
}
</script>

<style lang="scss">
@import '../assets/scss/variables';
.article-page {
  .title {
    border-bottom: 1px solid map-get($colors, 'gray-2');
  }
  .body {
    img {
      max-width: 100%;
      height: auto;
    }
    p {
      margin-top: 0;
      margin-bottom: 0;
      text-align: center;
      line-height: 1.5;
    }
  }
  .related {
    .iconfont {
      font-size: 1.5385rem;
    }
  }
}
</style>
